<template>
  <div class="login-container">
    <!-- 顶部图标与标语 -->
    <div class="header">
      <img src="https://cdn8.axureshop.com/demo2024/2284485/images/%E7%99%BB%E5%BD%95%EF%BC%88%E6%82%A3%E8%80%85%E7%AB%AF%EF%BC%89/u5773.png" alt="图标" class="icon" />
      <p class="slogan">用心呵护您的健康</p>
    </div>
    <h3 class="title">账号密码登录</h3>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!--          :formatter="formatPhone"-->
        <van-field v-model="form.userName" name="userName" label="用户" placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]">
          <template #prefix>+86</template>
        </van-field>
        <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div class="policy-and-forget">
        <van-checkbox v-model="isAgreePolicy">我已阅读并同意 <a href="#">《用户隐私政策》</a></van-checkbox>
        <a href="#" class="forget-password">忘记密码？</a>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" :disabled="!isAgreePolicy">
          登录
        </van-button>
      </div>
      <div class="extra-options">
        <a href="#" class="no-password-login">免密登录</a>
        <a href="#" class="register-new-user">注册新用户</a>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';

const router = useRouter();
const store = useCounterStore();
// 表单数据
const form = reactive({
  userName: '',
  password: ''
});
// 是否同意隐私政策
const isAgreePolicy = ref(false);

const formatPhone = (value: string) => {
  return value.replace(/\D/g, '').slice(0, 11);
};

const onSubmit = (values: any) => {
  if (!isAgreePolicy.value) {
    console.log('请同意用户隐私政策');
    return;
  }
  console.log('submit', values);
  axios.get('http://localhost:5223/api/Patient/Logins', {
    params: {
      username: form.userName,
      password: form.password
    }
  }).then((res) => {
    if (res.data.code === 202) {
      // 登录判定
        // 登录成功，写JWT的 token到本地
        window.localStorage.setItem("token", res.data.data.img);
        // 数据提交后端要加入新的Token值
        axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.token;
      store.useStore.mId = res.data.data.mId;
      store.useStore.userName = res.data.data.userName;
      store.useStore.age = res.data.data.age;
      store.useStore.disease = res.data.data.disease;
      store.useStore.sex = res.data.data.sex;
      store.useStore.img = res.data.data.img;
      store.useStore.phone = res.data.data.phone;
      //console.log(store.useStore.mId);
       //Toast(res.data.msg); 
       //Toast(res.data.msg); 
     // alert(res.data.msg);
      router.push('/HomePage');
    } else {
     // Toast(res.data.msg); 
    }
  });
};
</script>

<style scoped>
.login-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.icon {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.slogan {
  color: #999;
  margin: 0;
}

.title {
  font-size: 24px;
  margin-bottom: 30px;
}

.policy-and-forget {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.forget-password {
  color: #1989fa;
  text-decoration: none;
}

.extra-options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.no-password-login,
.register-new-user {
  color: #1989fa;
  text-decoration: none;
}
</style>